<template>
  <div class="centerMap">
    <div class="map">
      <div class="map1"><img src="../assets/img/lbx.png" class="map_img"></div>
      <div class="map2"><img src="../assets/img/jt.png" class="map_img"></div>
      <div class="map3"><img src="../assets/img/map.png" class="map_img"></div>
      <div class="map4">
        <div id="chinaMap" style="width:100%;height:100%;"></div>
      </div>
      <!-- <div style="position:absolute;left:12%;top:7%">
        <el-button size="mini" plain @click="add">累积确诊</el-button>
        <el-button size="mini" plain>新增确诊</el-button>
        <el-button size="mini" plain>现有确诊</el-button>
        <el-button size="mini" plain>累积治愈</el-button>
        <el-button size="mini" plain>累积死亡</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'
import '../assets/js/china'
import theme from '@/assets/js/purple'
export default {
    name: "index",
    data () {
      return {
        
      }
    },
    mixins:[echartMixins],
    components:{
    },
    mounted(){
      this.MyMap();
    },
    methods: {
      // 请求地图数据
      async getMapData () {
        const res = await this.$http.get('map/')
        // console.log(res)
        if(res.status !== 200){
            return this.$message.error('获取地图数据失败！')
        }
        return res.data.data;
      },
      async MyMap() {
        // 1. 实例化对象 
        this.$echarts.registerTheme('theme', theme);
        let myMap = this.$echarts.init(document.getElementById('chinaMap'),'theme');

        let option_map = await this.getMapData();

        // 3. 把配置和数据给实例对象
        myMap.setOption(option_map);
      }
    },
    destroyed () {
      window.onresize = null;
    }
  }
</script>

<style lang="scss" scoped>
.centerMap {
    height: 100%;
    width: 100%;
}
// 使用@keyframes规则，你可以创建动画。
// 创建动画是通过逐步改变从一个CSS样式设定到另一个。
// 在动画过程中，您可以更改CSS样式的设定多次。
// 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
.map{ 
  position:relative; 
  height: 80%; 
  width: 80%;
  z-index: 9;
}

.map4{ 
  width: 100%; 
  height:100%; 
  position: relative; 
  top:14%;
  left:11%;
  z-index: 5;
}
.map1,.map2,.map3{ 
  position:absolute; 
  opacity: .5
  }
// 外面大的
.map1{ 
  height:100%;
  width:100%; 
  margin-left: 10%;
  margin-top: 11%;
  animation: myfirst2 15s infinite linear;
  }
.map2{ 
  height:80%;
  width:80%;  
  z-index: 3; 
  opacity: 0.2; 
  margin-left: 20%;
  margin-top: 20%;
  animation: myfirst 10s infinite linear;
  }
.map3{ 
  height:80%;
  width:80%; 
  z-index: 1;
  margin-left: 20%;
  margin-top: 20%;
}

.map_img {
  height: 100%;
  margin-left: 7%;
}

</style>